<template>
    <el-row class="header-row">
        <el-row class="wh" type="flex" justify="space-between">
            <el-row type="flex">
               <!-- logo -->
                <div class="logo">
                    <!-- 标签跳转通过nuxt-link -->
                    <nuxt-link to='/'>
                        <img src="/images/logo.jpg" alt=""> 
                    </nuxt-link>
                </div>

                <!-- 头部导航 -->
                <el-row type="flex" class="nav">
                    <nuxt-link to="/">首页</nuxt-link>
                    <nuxt-link to="/tourismStrategy">旅游攻略</nuxt-link>
                    <nuxt-link to="/hotel">酒店</nuxt-link>
                    <nuxt-link to="/ticket">国内机票</nuxt-link>
                </el-row>    
            </el-row>

            <!-- 用户 -->
            <el-row>
                <!-- 不存在用户信息展示登录注册链接 -->
                <nuxt-link to="/user" class="no-login" v-if="!$store.state.user.userInfo.token">登录 / 注册</nuxt-link>
                <!-- 如果用户存在则展示用户信息，用户数据来自store -->
                <el-dropdown v-if="$store.state.user.userInfo.token">
                    <span class="el-dropdown-link login">
                        <div class="user">
                            <img :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar" alt="" class="pic">
                            <span>
                                {{$store.state.user.userInfo.user.nickname}}
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                        </div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><nuxt-link to="/user" class="to-user">个人中心</nuxt-link></el-dropdown-item>
                        <el-dropdown-item>
                            <div @click="logout">退出</div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-row>
        </el-row>
    </el-row> 
</template>

<script>
export default {
    methods:{
        logout(){
            //this.$store.state.user.username = '哈哈哈,被改掉啦'
            // 上面这种直接赋值会报错, 禁止直接修改 vuex 的状态数据
            // 需要调用 mutation 使用 $store.commit 方法
            // 传入两个参数, 第一个是仓库名/mutation 函数名的字符串, 第二个是额外数据
            // 将用户信息和token置空
            this.$store.commit('user/setUserInfo',{});
            this.$router.push('/user');
        }
    }
}
</script>

<style lang="less" scoped>
.wh{
   width:1000px;
   margin:auto;
}
.header-row{
    box-sizing: border-box;
    height: 60px;
    border-bottom: 1px solid #DDDDDD;
    .logo{
        height: 60px;
        line-height: 60px;
        box-sizing: border-box;
        img{
            width: 156px;
            height: 40px;
            vertical-align: middle;
        }
    }
    .nav{
        margin-left: 22px;
        a{
            box-sizing: border-box;
            height: 60px;
            line-height: 60px;
            padding:0 22px;
            color: #000;
            font-size: 17px;
            text-decoration: none;
            border-bottom: 5px solid transparent;//透明色
            &:hover,&:focus,&:active{
                color: #00A0FF;
                border-bottom: 5px solid #00A0FF;
            }
            // :focus聚焦？？问
            &:focus,&:active{
                background-color: #00A0FF;
                color: #fff;
                border-bottom: 5px solid #00A0FF;
            }
            // 变更内部样式
            &.nuxt-link-exact-active{
                background-color: #00A0FF !important;
                color: #fff !important;
            }
            //排除首页
            &:not(:first-child){
                &.nuxt-link-active{
                    background-color: #00A0FF !important;
                    color: #fff !important;
                }
            }
        }
    }
}

.no-login{
    //display: none;
    height: 60px;
    line-height: 60px;
    color: #666666;
    font-size: 14px;
    text-decoration: none;
    &:hover{
        text-decoration: underline;
        color: #26B1F3;
    }
}

.login{
    .user{
        height: 60px;
        line-height: 60px;
        img{
            width:28px;
            height: 28px;
            border-radius: 50%;
            vertical-align: middle;
        }
        span{
            font-size: 13px;
            color: #5F6266;
            .el-icon-caret-bottom{
                font-size: 14px;
            }
        }
        &:hover .pic{
            // 图片可以加边框
            border:2px solid #24ABF2;
        }
    }
}

.to-user{
    text-decoration: none;
}
</style>